<template>
  <div v-if="loading"
       v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       element-loading-spinner="el-icon-loading" element-loading-text="正在初始化" style="height: 100vh;">
  </div>
  <div v-else class="topo-fullscreen">
    <div>
      <el-dialog
          :close-on-click-modal="false"
          :show-close="false"
          :visible.sync="dialogFormVisible" append-to-body
          title="密码验证"
          width="80%">
        <el-form :model="form">
          <el-form-item label="分享密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmPass">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <TopoRender v-if="isShow&&dialogFormVisible==false" :defaultValue="selectedValue" :isShare="isShare"/>
    <el-empty v-else description="暂无分享"></el-empty>
  </div>
</template>

<script>

import TopoRender from '@/views/zutai/components/topo/TopoRender';

export default {
  name: 'TopoFullscreen',
  components: {
    TopoRender
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      isShow: false,
      selectedValue: 30,
      isShare: true,
      sharePass: "",
      loading: true
    }
  },
  created() {
    if (this.$route.query.guid) {
      this.getToken();
    } else {
      this.loading = false;
    }
  },
  mounted() {
  },
  methods: {
    getToken() {
      let url = "/ignoreToken/getTokenByImei"
      let query = {
        ztGuid: this.$route.query.guid,
        token: sessionStorage.getItem('Admin-Token-WebTopo') == 'undefined' ? "" : sessionStorage.getItem('Admin-Token-WebTopo')
      }
      request({
        url: url,
        method: "get",
        params: query,
      }).then((res) => {
        // console.log("token获取成功",res.data);
        sessionStorage.setItem('Admin-Token-WebTopo', res.data)
        this.loading = false;
        this.getZtData();
      }).catch(err => {
        console.log("获取token失败");
      })
    },
    confirmPass() {
      let url = "/zutai/bDeviceZt/confirmPass"
      let data = {
        guid: this.$route.query.guid,
        deviceMac: this.$route.query.deviceImei,
        sharePass: this.form.password
      }
      request({
        url: url,
        method: "post",
        data: data,
      }).then((res) => {
        let confirm = res.data
        if (confirm) {
          this.dialogFormVisible = false
          this.isShow = true;
        } else {
          this.$message({
            message: '密码不正确，请重新输入',
            type: 'warning'
          });
        }
      })
    },
    getZtData() {
      let query = {
        guid: this.$route.query.guid,
        deviceMac: this.$route.query.deviceImei,
      }
      let url = "/zutai/bDeviceZt/list"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((res) => {
        // console.log(res);
        if (res.rows.length > 0) {
          let ztData = res.rows[0];
          this.sharePass = ztData.sharePass;
          if (ztData.isShare == 1 && ztData.sharePass) {
            this.dialogFormVisible = true;
            this.isShow = true;
          } else if (ztData.isShare == 0 || ztData.isShare == null) {
            this.dialogFormVisible = false;
            this.isShow = false;
          } else {
            this.dialogFormVisible = false;
            this.isShow = true;
          }
        }
      })
    },
  },
}
</script>

<style scoped>
::-webkit-scrollbar-thumb {
  background-color: #ddd;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  position: absolute;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}
</style>


